<template>
  <div>
    <muaic-nav-bar/>
    <music-swiper class="music-swiper" />
    <music-content @click.native="get_songs" />
    <music-list/>
    <music-category/>
    <music-song :songs="songs" />
    <music-tab-bar path="/song" />
    
  </div>
</template>

<script>
import MuaicNavBar from './MuaicNavBar.vue'
import MusicCategory from './MusicCategory.vue'
import MusicContent from './MusicContent.vue'
import MusicList from './MusicList.vue'
import MusicSong from './MusicSong.vue'
import MusicSwiper from './MusicSwiper.vue'
import MusicTabBar from './MusicTabBar.vue'

export default {
  components: { MuaicNavBar, MusicSwiper, MusicContent, MusicTabBar, MusicSong, MusicList, MusicCategory },
  name: '',
  data () {
    return {
      songs:[]
    }
  },
  mounted(){
    this.$axios({
      url:'song',
      method:'get'
    }).then(res=>{
      this.songs = res.data
      // console.log(this.songs)
    })
  },
  methods:{
    get_songs(){
      this.$axios({
        url:'/song/getsongs',
        method:'get'
      }).then(res=>{
        console.log(res)
      })
    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.music-swiper{
  margin-top: 44px;
}
</style>